<template>
  <div>
    <el-row v-loading="loading">

              <el-input  v-model="search.name" placeholder="请输入内容"  style="width:200px;margin-left:20px"></el-input>
              <el-button  type="primary" icon="el-icon-search" circle></el-button>


      <el-col :span="24">
              <el-button style="float:right;width:100px"  type="primary" size="max" @click="addmember" v-show="permission.add" plain>新增</el-button>
      </el-col>

      <el-col :span="24">
        <member-data ref="memberData"></member-data>
              <el-table
              :data="searchmember(search.name).slice((search.currentPage-1)*search.limit,search.currentPage*search.limit)"
              border
              style="width: 100%">
                  <el-table-column
                    fixed
                    prop="fileNumber"
                    label="档案号">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名">
                  </el-table-column>
                  <el-table-column
                    prop="sex"
                    label="性别">
                <template slot-scope="scope">
                    <span v-if="scope == 0">女</span>
                    <span v-else>男</span>
                  </template>
                  </el-table-column>
                   <el-table-column
                    prop="age"
                    label="年龄">
                  </el-table-column>
                  <el-table-column
                    prop="healthMgrName"
                    label="健康管理师"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="phoneNumber"
                    label="电话">
                  </el-table-column>
                  <el-table-column
                    prop="createtime"
                    label="创建时间">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="primary" v-show="permission.edit" size="small">编辑</el-button>
                      <el-switch
                        :value="scope.row.status==1"
                        active-text="禁用"
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                         @change="deleteid(scope.row)"
                      ></el-switch>
                    </template>
                  </el-table-column>
            </el-table>
      </el-col>

        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="search.currentPage"
            :page-sizes="[5, 8, 10]"
            :page-size="search.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchtotal()">

          </el-pagination>
        </el-col>

  </el-row>
  </div>
</template>

<script>
import {getMemberList , deletemember} from "@/api/luowuwen/member"
import memberData from "../../../components/luowuwen/member/memberinfo.vue"
export default {

  data(){
    return{
        loading:false,
        tableData:[],
        search: {
          name: "",
          sort: "",
          offset:0,
          limit: 5,
          currentPage: 1,
          total:0
        },
        locked: false
        ,
        permission: {
          add: true,
          edit: true,
          remove: true
        },
    }
  },
  methods:{
     async initMember(){
        try {
          let [members] = await Promise.all([
            getMemberList()
          ])
          this.tableData=members.data;
          // this.search.total=members.data.length;
          // this.search.total=this.searchmember(this.search.name).length
        } catch(error) {
          this.outputError(error)
       }
    },
    async deleteid(row){

      if(row.status===1){
        row.status=0
      }else{
        row.status=1
      }

      try {
          let [flag] = await Promise.all([
            deletemember(row)
          ])
        } catch(error) {
          this.outputError(error)
       }
    },
    addmember(){
      this.$refs.memberData.$emit('openAddUserDialog')
    },
    handleClick(row){
        this.loading=true;
         try {
        this.$refs.memberData.$emit('openeditmemberdialog',row)
         }catch(error){
            this.outputError(error)
         }
        this.loading=false;
    },
    handleSizeChange(val){
       this.search.limit = val;
    },
    searchtotal(){
      this.searchmember(this.search.name).length
        return this.searchmember(this.search.name).length
     },
    searchmember(val){
      return this.tableData.filter(function (item) {
          if(item.name.search(val)>=0){
            return item;
          }
      })
    },
     outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  components: {memberData:memberData},
  created(){
    this.initMember();
    },



}
</script>

<style>

</style>
